<template>
	<view class="container" :class="skinStyle">
		<view class="coupon-top">
			<view class="coupon-head">
				<view>消费途径</view>
				<view>
					<picker class="coupon-head-sel" :value="couponIndex" :range="couponTypeArray" @change="bindPickerChange">
						<text class="text">{{couponTypeArray[couponIndex]}}</text>
						<text class="iconfont iconxiangyou"></text>
					</picker>
				</view>
			</view>
			<scroll-view class="top-tabs-view" scroll-x="true" :scroll-left="scrollLeft">
				<block v-for="(tab, index) in tabs" :key="index">
					<view class="tabs-item-wrap" v-bind:id="'tabNum' + index" @click="swichMenu(index)">
						<view class="tabs-item">
							<view class="tabs-item-txt" :class="[currentTab == index ? 'theme-color' : '']">{{ tab.name }}</view>
							<view class="tabs-item-bottom" :class="[currentTab == index ? 'select-item' : '']"></view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
		<view class="containerBox">
			<view class="redContainer" v-for="(item, index) in tabs1" :key="index">
				<view class="moneyBox" :class="currentTab==0?'':'gray-box'">
					<!-- 线下优惠券 -->
					<template v-if="couponFlg==1">
						<view class="moneyLeft">
							<view class="coupon-title">{{item.couponName}}</view>
							<view class="coupon-subtitle">
								<text class="status">{{getCouponStatus(item.status)}}</text>
								<text>{{ item.startTime | formart(item.startTime) }}至{{ item.endTime | formart(item.endTime) }}</text>
								<view class="overdue" v-if="overdue">{{ overdue }}</view>
							</view>
						</view>
						<view class="moneyRight">
							<view class="couponList">
								<text>&nbsp;</text>
								<view v-if="currentTab==0" @tap="createCouponCode(item)" class="coupon-btn margin-t">去使用</view>
								<view v-else class="coupon-btn margin-t">去使用</view>
							</view>
							<view class="mode">{{item.receiveMode==1?'DR商城获取':'FANS俱乐部获取'}}</view>
						</view>
					</template>
					
					
					<!-- 线上优惠券 -->
					<template v-if="couponFlg==2">
						<view class="moneyLeft">
							<view class="moneyLeft-top">
								<view class="moneyName" style="font-size: 30rpx;" v-html="getCouponLimit(item)"></view>
								<view class="moneyName" v-html="getCouponType(item, 2)"></view>
							</view>
								<view class="moneyDate">{{ item.startTime | formart(item.startTime) }}至{{ item.endTime | formart(item.endTime) }}</view>
							
							<view class="overdue" v-if="overdue">{{ overdue }}</view>
						</view>
						<view class="moneyRight" :class="[!overdue ? 'tui-coupon' : 'active']">
							<view class="couponType" v-html="getCouponType(item, 1)">代金券</view>
							<view class="couponWord">
								<view class="moneyLeftWord" v-if="item.couponType=='3' ">
									<span style="font-size:36rpx;">包邮</span>
								</view>
								<view class="moneyLeftWord" v-else>
									￥
									<span style="font-size:44rpx;">{{ item.couponPrice }}</span>
								</view>
								<view class="couponList">
									<view v-if="currentTab==0" @tap="goProduct(item)" class="coupon-btn coupon-btn1">去使用</view>
									<view v-else class="coupon-btn coupon-btn1">去使用</view>
								</view>
								<view class="mode mode1">{{item.receiveMode==1?'DR商城获取':'FANS俱乐部获取'}}</view>
							</view>
						</view>
					</template>
				</view>
			</view>
		</view>
		<view v-if="tabs1.length == 0">
			<mix-empty :type="'default'"></mix-empty>
		</view>
		<view class="coupon-code-mask" v-if="couponCodeFlag">
			<view class="coupon-code-con">
			<view class="coupon-code-close" @tap="closeCouponCode"><i class="iconfont iconguanbi3"></i></view>
			<view class="coupon-code-img"><image :src="couponCodeImg"></image></view>
			</view>
		</view>
		<tki-qrcode ref="qrcode"
		v-if="couponCodeData"
		:val="couponCodeData"
		:size=440
		:unit="'upx'"
		:onval="true"
		:loadMake="true"
		:usingComponents="true"
		 @result="qrR" 
		 :show="false"
		 :showLoading="true"
		/>	
		<!-- <view class="tui-safe-area"></view> -->
		<loading></loading>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	import mixin from '@/utils/mixin.js';
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	import tuiButton from '@/components/button/button';
	import mixEmpty from '@/components/mix-empty/mix-empty.vue';
	export default {
		mixins: [mixin, MescrollMixin],
		components: {
			tuiButton,
			mixEmpty
		},
		data() {
			return {
				scrollLeft: 0,
				currentTab: 0,
				scrollTop: 0,
				tabs: [{
						name: '未使用'
					},
					{
						name: '已使用'
					},
					{
						name: '已过期'
					}
				],
				tabs1: [],
				page: 1,
				upOption: {
					page: {
						size: 6 // 每页数据的数量,默认10
					},
					noMoreSize: 4, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					textNoMore: '-- 无更多信息 --'
				},
				downOption: {
					auto: false
				},
				overdue: '',
				currentTime: '',
				countUnused: '',
				countUsed: '',
				countExpired: '',
				countTips: '',
				couponTypeArray: ['线下优惠券', '线上优惠券'], //优惠券类型
				couponIndex: 1,
				couponFlg: 2, //1线下 2线上
				couponCodeFlag:false,
				couponCodeImg:'',//线下优惠券二维码
				couponCodeData:null,//线下优惠券内容
			};
		},
		onLoad() {
			// #ifdef H5
			this.$wechat.noShare();
			// #endif
			this.getCouponList();
		},
		onShow() {},
		filters: {
			formart(val) {
				if (val) {
					const time = val.split(' ')[0];
					return time;
				}
			}
		},
		methods: {
			getCouponStatus(type){
				return ['不可用','可使用','已使用','已过期'][Number(type)]
			},
			createCouponCode(item){
				let that=this;
				uni.showLoading({
					title: '优惠券生成中'
				});
				
				// #ifdef H5
				this.$wechat.getLocation((resLocation)=>{
					 that.couponCodeData=JSON.stringify({
						ccId:item.ccId,
						version:item.version,
						longitude:resLocation.longitude,
						latitude:resLocation.latitude,
					 })
					 console.log(resLocation.longitude)
					 console.log(resLocation.latitude)
					 console.log(8888888888888)
					 setTimeout(() => {
						that.$refs.qrcode._makeCode()
					 }, 100);
					 that.couponCodeFlag=true;
					 uni.hideLoading();
				 })
				// #endif
				
				// #ifdef APP-PLUS || MP-WEIXIN
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success(resLocation) {
						that.couponCodeData=JSON.stringify({
							ccId:item.ccId,
							version:item.version,
							longitude:resLocation.longitude,
							latitude:resLocation.latitude,
						})
						console.log(resLocation.longitude)
						console.log(resLocation.latitude)
						console.log(8888888)
						
						setTimeout(() => {
							that.$refs.qrcode._makeCode()
						}, 100);
						that.couponCodeFlag=true;
						 uni.hideLoading();
					},
					fail(err){
						 uni.hideLoading();
						uni.showToast({title:"请检查位置信息状态",icon:"none", mask:true,duration:2000})
					}
				});
				// #endif
			},
			closeCouponCode(){
				this.couponCodeFlag=false;
				this.getCouponList(); // 再刷新列表数据
			},
			qrR(path) {
				this.couponCodeImg = path;
			},
			goProduct(item) {
				if (item.fgActivityType == 1) {
					uni.navigateTo({
						url: '../../../packageA/pages/productList/productList'
					});
				} else {
					uni.navigateTo({
						url: '../../../packageA/pages/productList/productList?ccId=' + item.ccId
					});
				}
			},
			getCouponLimit(item) {
				if(item.couponType != '3'){
					if (item.fgActivityType == 1) {
						return '全场通用';
					} else {
						return '部分使用';
					}
				}else{
					return '\xa0';
				}
				
			},
			getCouponType(item, flag) {
				const type = item.couponType;
				if (flag == 1) {
					if (type == '2') {
						return '代金券';
					}else if(type == '3'){
						return '包邮券';
					} else {
						return '满减券';
					}
				} else {
					if (type == '2') {
						return '随单立减';
					}else if (type == '3') {
						if(item.couponLimit==0){
							return '包邮';
						}else{
							return '<span class="blackWord">满</span>' + item.couponLimit + '<span class="blackWord">元</span>包邮';
						}
					} else {
						return '<span class="blackWord">满</span>' + item.couponLimit + '<span class="blackWord">减</span>' + item.couponPrice;
					}
				}
			},
			getCouponList() {
				let params = {
					couponFlg: this.couponFlg,
					status: this.currentTab
				};
				this.$http.getCouponList(params).then(res => {
					if (res.status === 0) {
						this.tabs1 = res.data;
						this.countUnused = res.data.countUnused;
						this.countUsed = res.data.countUsed;
						this.countExpired = res.data.countExpired;
						this.countTips = res.data.countTips;

					}
				});
			},


			swichMenu: async function(current) {
				uni.hideLoading();
				//点击其中一个 tab
				// this.tabs1 = []
				if (this.currentTab == current) {
					return false;
				} else {
					this.currentTab = current;
					if (current === 0) {
						this.overdue = '';
					} else if (current === 1) {
						this.overdue = '已使用';
					} else {
						this.overdue = '已过期';
					}
					this.setScrollLeft(current);
					console.log(current);
					this.tabs1 = [];
					uni.createSelectorQuery()
						.select('.container')
						.boundingClientRect(res => {
							uni.pageScrollTo({
								duration: 0,
								scrollTop: 2
							});
						})
						.exec();
					this.getCouponList(); // 再刷新列表数据
				}
			},

			setScrollLeft: async function(tabIndex) {
				let leftWidthSum = 0;
				for (var i = 0; i <= tabIndex; i++) {
					let nowElement = await this.getWidth('tabNum' + i);
					leftWidthSum = leftWidthSum + nowElement.width;
				}
				let winWidth = uni.getSystemInfoSync().windowWidth;
				this.scrollLeft = leftWidthSum > winWidth ? leftWidthSum - winWidth : 0;
			},

			getWidth: function(id) {
				//得到元素的宽高
				return new Promise((res, rej) => {
					uni.createSelectorQuery()
						.select('#' + id)
						.fields({
								size: true,
								scrollOffset: true
							},
							data => {
								res(data);
							}
						)
						.exec();
				});
			},
			couponType(index) {
				if (index == '5') {
					return '仅可购买部分商品';
				} else {
					return '可购买全场商品';
				}
			},
			bindPickerChange(e) {
				uni.hideLoading();
				this.couponIndex = e.target.value
				if(this.couponIndex==0){
					this.couponFlg=1;
				}else if(this.couponIndex==1){
					this.couponFlg=2;//线上
				}
				this.currentTab=0;
				this.tabs1=[];
				this.overdue=''
				this.getCouponList()
			}
		}
	};
</script>

<style lang="scss">
	.container {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 50rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);
		overflow: hidden;
		width: 100%;
		min-height: 100vh;

		.coupon-top {
			width: 100%;
			position: fixed;
			left: 0;
			top: 0rpx;
			z-index: 100;

			.coupon-head {
				width: 100%;
				height: 88rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 28rpx 0 32rpx;
				background: #fff;
				border-bottom: 16rpx solid #f7f7f7;
				font-size: 28rpx;

				.coupon-head-sel {
					line-height: 88rpx;
					color: #999;

					.text {
						display: inline-block;
						margin-right: 6rpx;
					}
				}
			}

			.top-tabs-view {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-shadow: 0 0 4rpx #ffffff;
				white-space: nowrap;
				height: 90rpx;
				background: #fff;

				.tabs-item-wrap {
					display: inline-block;
					white-space: nowrap;
					height: 90rpx;
					width: 33.3%;

					.tabs-item {
						margin-left: 35rpx;
						margin-right: 30rpx;
						position: relative;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;

						.tabs-item-txt {
							height: 90rpx;
							line-height: 90rpx;
							font-size: 30rpx;
							font-weight: 400;
							// color: #333333;
						}

						.tabs-item-bottom {
							width: 130rpx;
							position: absolute;
							bottom: 0rpx;
							left: calc(50% - 65rpx);
						}
					}
				}
			}
		}

		.containerBox {
			margin-top: 180rpx;
		}
		
		
	}

	// .tui-safe-area {
	// 	height: 100rpx;
	// 	padding-bottom: env(safe-area-inset-bottom);
	// }
	.blackWord {
		color: #333333 !important;
	}

	

	.couponType {
		width: 60rpx;
		margin: 0 auto;
		line-height: 46rpx;
		font-size: 30rpx;
		display: inline-block;
		color: #ffffff;
		border-right: 1rpx solid #ffffff;
		position: absolute;
		left: 5px;
		top: 8rpx;
		height: 164rpx;
		writing-mode:vertical-lr;
		letter-spacing: 16rpx;
		padding-top: 16rpx;

	}

	.couponWord {
		display: inline-block;
		width: 210rpx;
		margin-left: 32px;
	}

	.tui-coupon {
		background-image: radial-gradient(circle at 0px 7px, transparent 6px, #ea655e 6px, #f69e97);
		background-size: 280rpx 17px;
	}



	.sticky-me {
		// margin-top: 90rpx;
	}

	.active {
		background-image: radial-gradient(circle at 0px 7px, transparent 6px, #808080 6px, #808080);
		background-size: 280rpx 17px;
	}

	.redContainer {
		width: 100%;
		padding: 0 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 9999;
		margin-top: 16rpx;
		
		.moneyBox {
			
			// margin-top: -500rpx;
			height: 176rpx;
			width: 100%;
			display: flex;
			align-items: center;

			.moneyLeft {
				background: #ffffff;
				padding: 16rpx 20rpx;
				position: relative;
				width: calc(100% - 270rpx);
				height: 176rpx;
				.moneyLeft-top{
					height: 100rpx;
				}
				.moneyName {
					color: #ea655e;
					font-size: 40rpx;
					line-height: 50rpx;
					text-align: center;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.moneyType {
					color: #666666;
					font-size: 28rpx;
					padding: 10rpx 0;
				}

				.moneyDate {
					color: #666;
					font-size: 26rpx;
					text-align: center;
					margin-top: 10rpx;
				}
				.coupon-title{
					font-size: 36rpx;
					color:#EA655E;
					height: 100rpx;
					line-height: 52rpx;
					margin-bottom: 6rpx;
					overflow : hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.coupon-subtitle{
					font-size: 24rpx;
					color: #666666;
					.status{
						display: inline-block;
						margin-right:20rpx ;
					}
				}
			}

						
			.moneyRight {
				width: 270rpx;
				height: 174rpx;
				text-align: center;
				// background-color: #808080;
				// border-radius: 20rpx 0 0 20rpx;
				// background-image: radial-gradient(circle at 278rpx 8px, transparent 6px);
				// background-size: 200px 18px;
				// background-repeat-x: no-repeat;
				background: url(~@/packageB/static/img/coupon-bg.png);
				background-size: 100% 100%;
				position: relative;
				align-items: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				.moneyLeftWord {
					color: #ffffff;
					font-size: 32rpx;
				}

				.moneyLeft-small {
					color: #ffffff;
					font-size: 26rpx;
				}
				.couponList {
					width: 100%;
					.coupon-btn {
						width: 150rpx;
						height: 60rpx;
						background: linear-gradient(316deg, #FFFFFF 0%, rgba(255, 255, 255, 0.8) 100%);
						box-shadow: 0px 1px 12px 0px rgba(255, 103, 154, 0.3);
						border-radius: 32rpx;
						margin: 0 auto;
						text-align: center;
						color: #EA655E;
						font-size: 28rpx;
						line-height: 60rpx;
					}
					.margin-t{
						margin-top:30rpx
					}
					.coupon-btn1{
						height: 50rpx;
						line-height: 50rpx;
						border-radius: 26rpx;
					}
				}
				.mode{
					font-size: 24rpx;
					color: #FFFFFF;
					margin-top:10rpx;
					opacity: 0.8;
				}
				.mode1{
					margin-top:4rpx;
				}
			}
			&.gray-box{
				.moneyLeft{
					.coupon-title{
						color:#6b6b6b;
					}
					.moneyName{
						color:#6b6b6b;
					}
				}
				.moneyRight{
					background: url(~@/packageB/static/img/coupon-bg1.png);
					background-size: 100% 100%;
					.couponList{
						.coupon-btn{
							color:#6b6b6b;
							box-shadow: 0px 1px 12px 0px rgba(172, 172, 172, 0.3);

						}
					}
				}
			}
		}
	}

	.overdue {
		border: 2px solid #cccccc;
		border-radius: 50%;
		width: 90rpx;
		height: 90rpx;
		line-height: 90rpx;
		color: #cccccc;
		-webkit-transform: rotate(30deg);
		transform: rotate(30deg);
		font-size: 24rpx;
		text-align: center;
		position: absolute;
		top: -8rpx;
		right: 20rpx;

	}

	.redTip {
		margin: 10rpx auto;
		text-align: center;
		font-size: 28rpx;
		color: #666;
	}
	//优惠券二维码
	.coupon-code-mask{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 9999;
		display: flex;
		justify-content: center;
		align-items: center;
		transition:0.3s ease-in-out;
		.coupon-code-con{
			width: 610rpx;
			height: 620rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 18rpx 0px rgba(0, 0, 0, 0.1);
			border-radius: 14rpx;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			.coupon-code-close{
				position: absolute;
				top:24rpx;
				right: 24rpx;
				color: #DEDEDE;
			}
			.coupon-code-img{
				width: 440rpx;
				height: 440rpx;
				image{
					width: 440rpx;
					height: 440rpx;
					margin-top:16rpx;
				}
			}
		}
	}

</style>
